<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="6" style="height: 220px;width: 220px;margin-left: 15px">
        <div class="avatar-upload-preview" style="border-radius: 1000px;overflow: hidden">
          <img v-if="user.imageUrl!== null" :src="preUrl + user.imageUrl" style="height: 220px;width: 220px"/>
          <img v-else :src="preUrl + defaultImage" style="height: 220px;width: 220px"/>
        </div>
      </a-col>
      <a-col span="18" style="margin-left: 20px">
        <a-row>
          <a-col span="20" style="font-size: 20px;font-weight: 600">
            {{ user.userName }}
          </a-col>
<!--          <a-col span="4" style="text-align: right">-->
<!--            <a-button style="border-radius: 15px" @click="edit"><a-icon type="edit"/>编辑个人信息</a-button>-->
<!--          </a-col>-->
        </a-row>
        <a-divider/>
        <a-row>
          <div style="display: flex">
            <div style="text-align: left;display: flex">
              <div>
                <div style="font-size: 20px;margin-left: 8px">{{ user.upload }}</div>
                <div>上传 </div>
              </div>
              <a-divider type="vertical" style="height: 50px;margin-left: 30px" />
            </div>
            <div style="text-align: center;margin-left: 20px;display: flex">
              <div>
                <div style="font-size: 20px">{{ user.download }}</div>
                <div>下载 </div>
              </div>
              <a-divider type="vertical" style="height: 50px;margin-left: 30px" />
            </div>
            <div style="text-align: center;margin-left: 20px;display: flex">
              <div>
                <div style="font-size: 20px">{{ user.collect }}</div>
                <div>收藏 </div>
              </div>
            </div>
          </div>
        </a-row>
        <a-row style="margin-top: 10px">
          性别: {{ user.userSex }}
        </a-row>
        <a-row style="margin-top: 5px">
          注册时间: {{ user.gmtCreate }}
        </a-row>
        <a-row style="margin-top: 5px">
          个人介绍: {{ user.userInfo }}
        </a-row>
      </a-col>
    </a-row>
    <a-tabs default-active-key="1" style="margin-top: 20px" @change="showChart">
      <a-tab-pane key="1" tab="创建的歌单">
        <div style="display: flex; flex-wrap: wrap;">
          <div v-for="(item,index) in playlists" :key="index">
            <a-col :md="6" :sm="24">
              <a-card hoverable class="card">
                <img
                  slot="cover"
                  :src="preUrl + (item.imageUrl === null ? '周杰伦.jpg' : item.imageUrl)"
                  @click="goToPlaylistDetail(item)"
                />
                <a-card-meta :title="item.playlistName">
                  <template slot="description">
                    {{ item.playlistInfo }}
                    <div>收藏人数： {{ item.collectors }}</div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-col>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="统计信息">
        <a-row>
          <a-row style="margin-top: 10px">
            <a-col :span="10">
              <h1>下载歌曲歌手占比</h1>
              <div id="chart2" style="height: 300px"></div>
            </a-col>
            <a-col span="1"></a-col>
            <a-col :span="13">
              <h1>贡献资源下载排行</h1>
              <div id="chart1" style="height: 300px"></div>
            </a-col>
          </a-row>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import { Chart } from '@antv/g2'
  import { getSingerName, getDownloadCount } from '@/api/music/selfCenter'
  import { getByUserId } from '@/api/basic/user'
  import { queryMusicSquareByUserId } from '@/api/music/playlist'

  export default {
    name: 'OthersCenter',
    components: {
    },
    data () {
      return {
        user: {},
        userId: -1,
        chart1: {},
        chart2: {},
        chart3: {},
        preUrl: '/api/file/download/image/',
        defaultImage: 'default.jpg',
        data1: [],
        data2: [],
        playlists: [],
        queryParam: {},
        pageNo: 1,
        pageSize: 25
      }
    },
    created () {
      this.userId = this.$route.params.userId
      if (this.userId === undefined) {
        console.log(this.$route.params)
        this.userId = window.sessionStorage.getItem('othersUserId')
      } else {
        window.sessionStorage.setItem('othersUserId', this.userId)
      }
      this.init()
    },
    methods: {
      init () {
        getByUserId({ 'userId': this.userId })
          .then(res => {
            if (res.data.message !== 'error') {
              this.user = res.data.result
              if (this.user.userSex === null) {
                this.user.userSex = 0
              }
              if (this.user.userSex === 0) {
                this.user.userSex = '保密'
              } else if (this.user.userSex === 1) {
                this.user.userSex = '男'
              } else if (this.user.userSex === 2) {
                this.user.userSex = '女'
              }
              if (this.user['userInfo'] === null || this.user['userInfo'] === '') {
                this.user.userInfo = '这个人很懒，什么也没留下'
              }
            } else {
              this.$message.error('获取用户信息失败')
            }
          })
        const reqParams = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        this.queryParam.isSelf = '2'
        this.queryParam.userId = this.userId
        const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
        queryMusicSquareByUserId(Object.assign(reqParams, queryJson))
          .then(res => {
            if (res.data.message !== 'error') {
              this.playlists = res.data.result.data
            } else {
              this.$message.error('查询歌单失败！')
            }
          })
      },
      initChart () {
        getSingerName({ 'userId': this.userId })
          .then(res => {
            if (res.data.message !== 'error') {
              this.data2 = res.data.result
              this.newChart2()
            } else {
              this.$message.error('获取失败')
            }
          })
        getDownloadCount({ 'userId': this.userId })
          .then(res => {
            if (res.data.message !== 'error') {
              this.data1 = res.data.result
              this.newChart1()
            } else {
              this.$message.error('获取失败')
            }
          })
      },
      showChart (key) {
        if (key === '2') {
          this.initChart()
        }
      },
      edit () {
        this.$router.push({ path: '/selfCenter/editSelfInfo' })
      },
      goToPlaylistDetail (record) {
        this.$router.push({ name: 'playlistDetail',
          params: record
        })
      },
      newChart1 () {
        this.chart1 = new Chart({
          container: 'chart1',
          autoFit: true
        })
        this.chart1.data(this.data1)
        this.chart1.scale({
          y: {
            nice: true
          }
        })
        this.chart1.axis('songName', {
          title: null,
          tickLine: null,
          label: {
            formatter: text => {
              if (text.length > 10) { text = text.substr(0, 10) + '...' }
              return text
            }
          }
        })

        this.chart1.axis('count', {
          label: {
            style: {
              fill: '#aaaaaa',
              fontSize: 12
            }
          },
          title: null
        })
        this.chart1.tooltip({
          position: 'right',
          shared: true,
          showMarkers: false
        })
        this.chart1.legend(false)
        this.chart1.coordinate().transpose().scale(1, -1)
        this.chart1
          .interval()
          .position('songName*count')
          .adjust([{
            type: 'dodge',
            marginRatio: 1 / 32
          }])
          .label('count', {
            position: 'middle'
          })
          .tooltip('songName*count', (questionContent, number) => {
            return {
              name: '下载次数',
              value: number + '次'
            }
          })
        this.chart1.interaction('active-region')
        this.chart1.interaction('legend-highlight')
        this.chart1.render()
      },
      newChart2 () {
        this.chart2 = new Chart({
          container: 'chart2',
          autoFit: true
        })
        this.chart2.data(this.data2)
        this.chart2.legend(false)
        this.chart2.coordinate('theta', {
          radius: 0.7,
          innerRadius: 0.9
        })
        this.chart2.tooltip({
          showTitle: false,
          showMarkers: false,
          itemTpl: '<li class="g2-tooltip-list-item">' +
            '<span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}' +
            '</li>'
        })
        this.chart2
          .annotation()
          .text({
            position: ['50%', '50%'],
            content: '总计',
            style: {
              fontSize: 14,
              fill: '#8c8c8c',
              textAlign: 'center'
            },
            offsetY: -20
          })
          .text({
            position: ['50%', '50%'],
            content: data => {
              let sum = 0
              data.forEach(function (item) {
                sum += item.count
              })
              return sum
            },
            style: {
              fontSize: 20,
              fill: '#8c8c8c',
              textAlign: 'center'
            },
            offsetX: -10,
            offsetY: 20
          })
          .text({
            position: ['50%', '50%'],
            content: '首',
            style: {
              fontSize: 14,
              fill: '#8c8c8c',
              textAlign: 'center'
            },
            offsetY: 20,
            offsetX: 20
          })
        this.chart2
          .interval()
          .adjust('stack')
          .position('count')
          .color('singer')
          .label('count', (assessSum) => {
            return {
              content: (data) => {
                return `${data.singer}: ${assessSum}首`
              }
            }
          })
          .tooltip('singer*count', (item, percent) => {
            return {
              name: item,
              value: percent + '首'
            }
          })

        this.chart2.interaction('element-active')

        this.chart2.render()
      }
    }
  }
</script>

<style lang="less" scoped>
  .center {
    position: absolute;
    left: 50%; top:50%;
    transform: translate(-50%, -50%);
  }
  .card {
    width: 200px;
    margin-right: 15px;
    margin-top: 15px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  img {
    width: 100%;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  ::v-deep .ant-card-meta-title {
    font-size: 14px !important;
  }
  ::v-deep .ant-card-meta-description {
    font-size: 13px !important;
  }
  ::v-deep .ant-card-body {
    padding: 12px 12px 15px;
  }
</style>
